<template>
    <div class="bg-white infobox df">
        <div v-if="data.slides && data.slides.length" class="imgbox">
            <div class="showimg df ai-c jc-c">
                <img :src="slideActive" alt="" class="img" />
            </div>
            <div class="imglist mt-16">
                <swiper :slidesPerView="'auto'" grabCursor>
                    <swiper-slide v-for="i in data.slides" :key="i" style="width:auto;">
                        <div class="slide" :class="{active:i==slideActive}" @click="onSwiper(i)">
                            <img :src="i" alt="" class="img" />
                        </div>
                    </swiper-slide>
                </swiper>
            </div>
        </div>
        <div class="fc info">
            <div class="df">
                <img v-if="data.logo" :src="data.logo" alt="" class="logo" />
                <div class="titlebox">
                    <div class="title fs-24">{{data.title}}</div>
                    <div class="mt-10 lh-1 c-99 fs-14">版本号：v1.5.8 [复制信息]</div>
                    <div class="mt-6 df df-ww fs-12 c-99">
                        <a class="label cursor link" v-for="item in data.labels" :key="item.id" @click="clickLabel(item)">
                            <i class="wi wi-tag fs-12"></i>
                            <span>{{item.title}}</span>
                        </a>
                    </div>
                </div>
            </div>
            <!-- <div class="data mt-30 df ai-c">
                <div class="df ai-c jc-c c-99 fs-14 cursor" style="width:76px;">
                    <el-icon :size="14" color="#999999"><Star /></el-icon>
                    <span style="margin-left:2px;">收藏</span>
                </div>
                <label class="df ai-c ml-10">
                    <div class="c-99">应用评价</div>
                    <div class="b ml-4">9</div>
                </label>
                <div class="line"></div>
                <label class="df ai-c ml-10">
                    <div class="c-99">安装</div>
                    <div class="b ml-4">407</div>
                </label>
                <div class="line"></div>
                <label class="df ai-c ml-10">
                    <div class="c-99">付费安装</div>
                    <div class="b ml-4">407</div>
                </label>
            </div> -->
            <div class="mt-30">
                <div class="pricebox df">
                    <label class="label c-66 lh-2">价格</label>
                    <div class="df ai-e">
                        <div class="price fs-24 lh-1">￥{{acctiveProduct.unit_price || '--'}}</div>
                        <!-- <div class="ml-10 c-99">商业版价格 ￥495</div> -->
                        <!-- <a href="javascript:;" class="c-blue ml-4">升级商业版</a> -->
                    </div>
                </div>
            </div>
            <el-form class="mt-30 form" :label-width="80" label-position="left">
                <el-form-item label="产品">
                    <label class="radiolabel c-99 cursor" v-for="item in data.products" :key="item.id">
                        <input type="radio" v-model="product" :value="item.id" name="app" />
                        <span>{{item.title}}</span>
                    </label>
                </el-form-item>
                <el-form-item label="发票提示">
                    <span class="c-99 fs14">此服务由第三方服务商提供，如需开发票请咨询服务商</span>
                </el-form-item>
                <el-form-item>
                    <el-popover placement="top-start" trigger="hover" :width="320">
                        <template #reference>
                            <el-button type="danger" @click="buy">购买使用授权</el-button>
                        </template>
                        <div class="df ai-c fs-14 lh-14 c-66">
                            <el-icon :size="16"><WarningFilled /></el-icon>
                            <span class="ml-4">请确认<span class="c-red">需购买的站点对象</span>，购买后<span class="c-red">不可更换</span></span>
                        </div>
                    </el-popover>
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="agreeCheck" class="redcolor" label="" size="large">购买即同意<a href="https://wiki.w7.com/chapter/887?id=3909" target="_template" class="accord link">《微擎平台使用协议》</a></el-checkbox>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import myAxios from '@/utils';

export default {
    props: {
        data:{type:Object, default:{}},
    },
    components: {Swiper, SwiperSlide},
    data(){
        return {
            arr: [0,1,2,3,4,5,6],
            slideActive: 0,

            product: null,
            agreeCheck: false, // 购买同意
        }
    },
    created(){
        if(this.data){this.dataInit();}
    },
    methods:{
        dataInit(){
            // 轮播
            if(this.data.slides?.length){
                this.slideActive = this.data.slides[0];
            }
            // 规格
            if(this.data.products?.length){
                this.product = this.data.products[0].id;
            }
        },
        clickLabel(item){
            console.log(item);
        },
        buy(){
            if(!this.agreeCheck){
                this.$message.warning("请阅读并同意《微擎平台使用协议》");
                return;
            }
            myAxios.post("/ddd-order/share/command/buy_now",{data:{product_id:this.acctiveProduct.id}}).then(res=>{
                if(!res?.data){return}
                this.$router.push('/checkorder?id='+res.data.order_id);
                return;
            })
        },
        onSwiper(e){
            console.log(typeof e)
            this.slideActive = e;
        },
    },
    watch:{
        data(){
            this.dataInit();
        },
    },
    computed:{
        acctiveProduct(){
            if(!this.data?.products?.length){return {}}
            let act = this.data.products.find((i)=>{
                return i.id == this.product;
            });
            return act || {};
        },
    },
}
</script>

<style scoped>
.infobox{padding:20px;}
.imgbox{width:368px; margin-right:30px;}
.imgbox .showimg{width:368px; height:368px;}
.imgbox .showimg .img{max-width:100%; max-height:100%;}
.imgbox .slide{margin-right:10px; border:2px solid transparent;}
.imgbox .slide.active{border-color:var(--el-color-danger);}
.imgbox .imglist .img{width:68px; height:68px; display:block;}

.info .logo{width:76px; height:76px; margin-right:16px; border-radius:5px;}
.info .titlebox .title{line-height:26px;}
.info .titlebox .label{padding-top:4px; margin-right:10px;}
.info .titlebox .label i{margin-right:4px;}
.info .data .line{background:#e8e9eb; width:1px; height:14px; margin:0 20px;}

.pricebox{padding:15px; background:#ffede8;}
.pricebox .label{width:62px; padding-right:12px; color:#606266;}
.pricebox .price{color:#cf1110;}

.form{padding:0 15px}
.radiolabel{user-select:none;}
.radiolabel input{display:none;}
.radiolabel span{display:inline-block; box-sizing:border-box; padding:0 8px; line-height:28px; border:1px solid; border-radius:3px; margin:0 12px 9px 0;}
.radiolabel input:checked~span{border-color:#cf1110;color:#cf1110;}

a.link:hover{color:var(--theme);}
</style>